<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current" style="background: #fff;">
        <form class="check-form" action="${ctx.host}/profile/courses/${courseRound.id}/appointment/check">
        <header class="bar bar-nav fs-header-small fs-header-small appoint-header" style="text-align: center;">
          <a href="${ctx.host}/profile/courses/${courseRound.id}" class="icon icon-left pull-left"></a>
          <div class="item-input" style="display: inline-block;">
            <input type="hidden" name="site" value="${currentSite.id}">
            <input type="hidden" name="day" value='<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd"/>'>
            <input type="hidden" name="hour">
            <fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd" var="dayForSchedule" />
          </div>
        </header>
        
        <div class="content">
          <div class="buttons-tab appoint-tab appoint-scroll">
            <c:forEach var="day" items="${thisWeek}" varStatus="status">
              <fmt:formatDate value="${day}" var="dayString" pattern="yyyy-MM-dd" />
              <fmt:formatDate value="${currentDay}" var="currentDayString" pattern="yyyy-MM-dd" />
              <a href="${ctx.host}/profile/courses/${courseRound.id}/appointment?site=${currentSite.id}&day=${dayString}&scheduleId=${selectedSchedule == null ? '': selectedSchedule.id}" class="tab-item ${currentDayString eq dayString ? 'active' : ''} button">
                <small><fmt:formatDate value="${day}" pattern="EEEE" /></small><br style="height: 0px;">
                <span class="day"><fmt:formatDate value="${day}" pattern="MM" />月<fmt:formatDate value="${day}" pattern="dd" />日</span>
              </a>
            </c:forEach>
          </div>
          <div class="content-block appointment" style="margin-top: 3.75rem;">
            <c:forEach var="hour" begin="${appointStartTime[0]}" end="${appointEndTime[0]-1}">
              <c:set var="hourPerfix" value="${hour >= 10 ? '' : '0'}"> </c:set>
              <c:set var="afterhourPerfix" value="${hour+1 >= 10 ? '' : '0'}"> </c:set>
              <c:set var="beforehalfhour" value="${currentDayString}|${hourPerfix}${hour-1}:30"/>
              <c:set var="dayhour" value="${currentDayString}|${hourPerfix}${hour}:00"/>
              <c:set var="halfhour" value="${currentDayString}|${hourPerfix}${hour}:30"/>
              <c:set var="afterdayhour" value="${currentDayString}|${hourPerfix}${hour + 1}:00"/>
              <c:set var="isEndHour" value="${hour == appointEndTime[0]-1 and appointEndTime[1] == 30}"></c:set>
              <c:choose>
                <c:when test="${today}">
                  <c:choose>
                    <c:when test="${hour == currentHour and currentMinute < 30 }">
                      <%@ include file="/WEB-INF/jsps/course/year/appointment-half-hour-item.jsp" %>
                    </c:when>
                    <c:when test="${hour > currentHour}">
                      <c:choose>
                        <c:when test="${hour == appointStartTime[0] and appointStartTime[1] == '30'}">
                          <%@ include file="/WEB-INF/jsps/course/year/appointment-half-hour-item.jsp" %>
                        </c:when>
                        <c:otherwise>
                          <%@ include file="/WEB-INF/jsps/course/year/appointment-whole-hour-item.jsp" %>
                        </c:otherwise>
                      </c:choose>
                    </c:when>
                  </c:choose>
                </c:when>
                <c:otherwise>
                  <c:choose>
                    <c:when test="${hour == appointStartTime[0] and appointStartTime[1] == '30'}">
                      <%@ include file="/WEB-INF/jsps/course/year/appointment-half-hour-item.jsp" %>
                    </c:when>
                    <c:otherwise>
                      <%@ include file="/WEB-INF/jsps/course/year/appointment-whole-hour-item.jsp" %>
                    </c:otherwise>
                  </c:choose>
                </c:otherwise>
              </c:choose>
            </c:forEach>
          </div>
          <a class="item-content item-link hide" href="#coach-select" data-toggle="push"></a>
        </div>
        <!-- End Content -->
        <!-- <nav class="bar bar-footer shop-footer" style="height: 2.5rem; z-index: 999;">
          <p style="padding:0; margin: 0px;"><a href="javascript:void;" class="button button-big button-success button-fill button-submit" style="background-color: #65C1B5; color: #FFF; padding: 0px; border-radius: 0px; text-decoration: none; top:0px; height: 2.5rem; line-height: 2.5rem;">立即预约</a></p>
        </nav> -->
        </form>
      </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/course/year-appointment.js" />
    <script type="text/javascript">
      var jsConfig = JSON.parse('${wechatJsConfig}')
      var scheduleId = '${selectedSchedule == null ? '' : selectedSchedule.id}';
      require(['page/course/year-appointment'], function(page) {
        page.init({
          jsConfig: jsConfig,
          startDate: '${beginDate}',
          roundId: '${courseRound.id}',
          scheduleId: scheduleId
        })
      })
    </script>
    
  </body>
</html>